<template>
    <div id="singer_checked">
        <div class="container" slot="songinfo">
            <el-form v-if="Object.keys(form).length > 0" ref="form" :model="form" label-width="auto">
                <div class="wrapper">
                    <div style="display: inline-block; " class="wrapper-left">
                        <el-form-item label="修改前" class="title"> </el-form-item>

                        <el-form-item label="图片:">
                            <el-image style="width: 200px; height: 200px" :src="form.beforData.tblAlbumPictures[0].filePath" :fit="'fill'">
                                <div slot="error" class="image-slot" style="">
                                    暂无图片
                                </div>
                            </el-image>
                        </el-form-item>

                        <el-form-item label="专辑ID:">
                            <el-input class="w" v-model="form.beforData.id" :disabled="true"></el-input>
                        </el-form-item>

                        <el-form-item label="专辑名:">
                            <el-input class="w" v-model="form.beforData.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="全拼:">
                            <el-input class="w" v-model="form.beforData.namePinyinFull" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="简拼:">
                            <el-input class="w" v-model="form.beforData.namePinyinShort" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="专辑子标题:">
                            <el-input class="w" v-model="form.beforData.subtitle" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="语言:">
                            <!-- <el-input class="w" v-model="form.beforData.language" disabled></el-input> -->
                            <el-select v-model="form.beforData.language" placeholder="请选择语言" class="handle-select mr10 w" disabled>
                                <el-option key="0" label="国语" value="zh"></el-option>
                                <el-option key="1" label="英语" value="en"></el-option>
                            </el-select>
                        </el-form-item>

                        <!-- <el-form-item label="风格：">
                            <el-select v-model="form.beforData.genre" placeholder="" class="handle-select mr10" disabled>
                                <el-option v-for="(item, index) in genres_3" :key="index" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item> -->

                        <el-form-item label="风格：">
                            <el-input class="w" v-model="form.beforData.genre" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="状态：">
                            <el-select disabled :clearable="true" v-model="form.beforData.status" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="描述:">
                            <el-input
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="form.beforData.description"
                                maxlength="10000"
                                show-word-limit
                                rows="5"
                                disabled
                            >
                            </el-input>
                        </el-form-item>

                        <el-form-item label="打标签：">
                            <!-- <el-select disabled :clearable="true" v-model="form.beforData['打标签']" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select> -->

                            <el-cascader
                                disabled
                                :show-all-levels="true"
                                v-model="form.beforData.tagIds"
                                class="w"
                                :options="tagList"
                                :props="{
                                    emitPath: false,
                                    multiple: true,
                                    checkStrictly: true,
                                    value: 'value',
                                    label: 'label',
                                    children: 'children'
                                }"
                                @change="handlechange"
                            >
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.label }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                    </div>
                    <div style="display: inline-block; " class="wrapper-right">
                        <el-form-item label="修改后" class="title"> </el-form-item>
                        <el-form-item label="图片:">
                            <el-image
                                style="width: 200px; height: 200px"
                                :src="form.afterDate.tblAlbumPictures[0].filePath || form.beforData.tblAlbumPictures[0].filePath"
                                :fit="'fill'"
                            >
                                <div slot="error" class="image-slot" style="">
                                    暂无图片
                                </div>
                            </el-image>
                        </el-form-item>

                        <el-form-item label="专辑ID:" :required="form.afterDate.id != form.beforData.id">
                            <el-input class="w" v-model="form.afterDate.id" :disabled="true"></el-input>
                        </el-form-item>

                        <el-form-item label="专辑名:" :required="form.afterDate.name != form.beforData.name">
                            <el-input class="w" v-model="form.afterDate.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="全拼:" :required="form.afterDate.namePinyinFull != form.beforData.namePinyinFull">
                            <el-input class="w" v-model="form.afterDate.namePinyinFull" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="简拼:" :required="form.afterDate.namePinyinShort != form.beforData.namePinyinShort">
                            <el-input class="w" v-model="form.afterDate.namePinyinShort" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="专辑子标题:" :required="form.afterDate.subtitle != form.beforData.subtitle">
                            <el-input class="w" v-model="form.afterDate.subtitle" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="语言:" :required="form.afterDate.language != form.beforData.language">
                            <el-select v-model="form.afterDate.language" placeholder="请选择语言" class="handle-select mr10 w" disabled>
                                <el-option key="0" label="国语" value="zh"></el-option>
                                <el-option key="1" label="英语" value="en"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 
                        <el-form-item
                            label="风格："
                            :required="JSON.stringify([...form.afterDate.genre].sort()) != JSON.stringify([...form.beforData.genre].sort())"
                        >
                            <el-select v-model="form.afterDate.genre" placeholder="" class="handle-select mr10" disabled>
                                <el-option v-for="(item, index) in genres_3" :key="index" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item> -->

                        <el-form-item
                            label="风格："
                            :required="JSON.stringify([...form.afterDate.genre].sort()) != JSON.stringify([...form.beforData.genre].sort())"
                        >
                            <el-input class="w" v-model="form.afterDate.genre" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="状态：" :required="form.afterDate.status != form.beforData.status">
                            <el-select disabled :clearable="true" v-model="form.afterDate.status" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="描述:" :required="form.afterDate.description != form.beforData.description">
                            <el-input
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="form.afterDate.description"
                                maxlength="10000"
                                show-word-limit
                                rows="5"
                                disabled
                            >
                            </el-input>
                        </el-form-item>

                        <el-form-item
                            label="打标签："
                            :required="
                                JSON.stringify([...form.afterDate.tagIds].sort()) != JSON.stringify([...form.beforData.tagIds].sort())
                            "
                        >
                            <!-- <el-select disabled :clearable="true" v-model="form.afterDate['打标签']" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select> -->
                            <el-cascader
                                disabled
                                :show-all-levels="true"
                                v-model="form.afterDate.tagIds"
                                class="w"
                                :options="tagList"
                                :props="{
                                    emitPath: false,
                                    multiple: true,
                                    checkStrictly: true,
                                    value: 'value',
                                    label: 'label',
                                    children: 'children'
                                }"
                                @change="handlechange"
                            >
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.label }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                    </div>
                </div>
            </el-form>

            <el-row>
                <el-button type="primary" @click="handlePass">通过</el-button>
                <el-button @click="handleRefuse">拒绝</el-button>
            </el-row>
        </div>

        <el-dialog title="备注" :visible.sync="visible" width="30%">
            <el-form ref="reason" :model="reason" label-width="70px">
                <el-form-item label="">
                    <el-input
                        v-model="reason.remark"
                        maxlength="120"
                        show-word-limit
                        type="textarea"
                        :autosize="{ minRows: 10, maxRows: 15 }"
                        placeholder="请填写拒绝原因"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="refuse">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex';
// import { genres_3 } from '@/components/common/';
export default {
    name: 'AlbumChecked',

    components: {},
    watch: {
        // '$route.query'(a, b) {
        //     console.log(a, b);
        //     if (a.id && b.id && a.id != b.id) {
        //         this.getDataById(this.$route.query.id);
        //     }
        // },
        '$route.path'(a, b) {
            console.log(a, b);
            if (a != '/song/checked') {
                // this.tableData[this.tableData.length - 1].preview = 1;
            }
        }
    },
    data() {
        return {
            tagList: [],
            // genres_3,
            accept: '.lrc',
            baseUrl: process.env.VUE_APP_SRC1,
            reason: {
                remark: ''
            },
            visible: false,

            form: {}
        };
    },
    destroyed() {
        if (!this.tagsList.some(item => item.name === 'AlbumChecked')) {
            localStorage.removeItem('id_album');
        } else {
            //  什么都不做
        }
    },
    activated() {
        if (this.$route.query.id) {
            this.getDataById(this.$route.query.id);
            this.getTagData();
            this.form = {};
        }
    },
    computed: {
        ...mapGetters(['tagsList'])
    },
    methods: {
        handlechange(value) {
            console.log(value); // 这里的值会输出 value 的一个数组
        },
        async getTagData() {
            try {
                let url = '/tag/tagAll';
                let { data: res } = await this.$http[2].get(url, {
                    params: {
                        type: 2
                        // page: this.query.pageIndex,
                        // size: this.query.pageSize
                    }
                });
                // console.log('标签列表', res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                if (res.data && res.data.length && res.data.length != 0) {
                    res.data.map(v => {
                        v.disabled = true;
                    });
                    var ret = this.formatData(res.data);
                    console.log('ret', ret);
                    this.tagList = ret;
                } else {
                    this.tagList = [];
                }
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        formatData(array) {
            for (let item of array) {
                item.value = item.id;
                item.label = item.description;
                item.children = [];
                // 删除返回的没用的属性
                delete item.type;
                delete item.createTime;
                delete item.description;
                delete item.groupId;
                delete item.id;
                delete item.name;
                delete item.status;
                delete item.updateTime;
                delete item.pid;

                if (item.tblTags && item.tblTags.length != 0) {
                    item.children = item.tblTags;
                    // 删除返回的没用的属性
                    delete item.tblTags;
                    this.formatData(item.children);
                } else {
                    delete item.children;
                }
            }
            return array;
        },
        ...mapMutations(['SET_TAGSLIST', 'SET_QUKUALBUM_DATA']),

        // 获取歌曲信息
        async getDataById(aid) {
            try {
                let url = '/album/info';
                let { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        id: aid
                    })
                });
                console.log(res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                var ret = { ...res.data };
                // 筛选需要的字段
                if (ret.beforData) {
                    let requiredFields = {
                        tblAlbumPictures: [
                            {
                                filePath: ''
                            }
                        ],
                        id: '',
                        name: '',
                        namePinyinFull: '',
                        namePinyinShort: '',
                        subtitle: '',
                        language: '',
                        genre: '',
                        status: '',
                        description: '',
                        tagIds: []
                    };
                    ret.beforData = this.$chooseFields(ret.beforData, Object.keys(requiredFields), {}, requiredFields);
                } else {
                    ret.beforData = {};
                }

                // 中间处理:
                // 歌手图片
                ret.beforData.tblAlbumPictures[0].filePath = ret.beforData.tblAlbumPictures[0].filePath
                    ? `${process.env.VUE_APP_SRC1}/api/stream/audio?path=${ret.beforData.tblAlbumPictures[0].filePath}`
                    : '';
                // 风格
                // ret.beforData.genre = ret.beforData.genre ? [...new Set(ret.beforData.genre.split(','))] : [];

                if (ret.afterDate) {
                    let requiredFields = {
                        tblAlbumPictures: [{ filePath: '' }],
                        id: '',
                        name: '',
                        namePinyinFull: '',
                        namePinyinShort: '',
                        subtitle: '',
                        language: '',
                        genre: '',
                        status: '',
                        description: '',
                        tagIds: []
                    };
                    ret.afterDate = this.$chooseFields(ret.afterDate, Object.keys(requiredFields), {}, requiredFields);
                } else {
                    ret.afterDate = {};
                }

                // 中间处理:
                // 歌手图片

                ret.afterDate.tblAlbumPictures[0].filePath = '';
                // 风格
                // ret.afterDate.genre = ret.afterDate.genre ? [...new Set(ret.afterDate.genre.split(','))] : [];
                this.form = ret;

                this.getTblAlbumPictures();
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        async getTblAlbumPictures() {
            try {
                let url = '/album/getpic';
                let res = await this.$http[0].get(url, {
                    params: this.$removeField({
                        id: this.$route.query.id
                    }),
                    headers: {
                        name: localStorage.getItem('ms_username')
                    },
                    responseType: 'blob' // 二进制流转Blob对象
                });
                console.log(res); // 得到Blob对象
                // if (res + '' != '[object Blob]') {
                //     throw new Error(res.message);
                // }
                if (res.headers['content-type']) {
                    // 此时没有二进制流返回
                    return;
                }
                // blob对象转File对象
                let file = new window.File([res.data], '图片', { type: res.data.type });
                console.log(file); // 得到File对象
                // File对象转blob协议的URL
                let filedir = this.$getObjectURL(file);
                console.log(filedir);

                this.form.afterDate.tblAlbumPictures[0].filePath = filedir;
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        setTag() {},
        rowClass({ row, rowIndex }) {
            return 'height: 26px;background-color:#409EFF !important;color:#fff; text-align: center;';
        },

        handleClick(e, row) {
            console.log(e, row);

            if (row.type == 'FLAC-1000K-FTD') {
                // 播放音乐
                this.togglePlaying(e, row);
            } else {
                this.open();
            }
        },

        handleClick_(e, row) {
            console.log(e, row);

            if (row.type == 'FLAC-1000K-FTD') {
                // 播放音乐
                this.togglePlaying_(e, row);
            } else {
                this.open_();
            }
        },
        open() {
            this.$alert(`<div style='overflow : auto;  height: 666px;'>` + this.lyricString + `</div>`, '歌词预览', {
                dangerouslyUseHTMLString: true
            });
        },
        open_() {
            this.$alert(`<div style='overflow : auto;  height: 666px;'>` + this.lyricString_ + `</div>`, '歌词预览', {
                dangerouslyUseHTMLString: true
            });
        },

        handlePass() {
            this.$confirm('确定要通过吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.pass();
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消通过'
                    });
                });
        },

        async pass() {
            try {
                let url = '/album/update';
                let { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        id: this.$route.query.id
                    }),
                    headers: {
                        name: localStorage.getItem('ms_username')
                    }
                });
                console.log(res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.$closeActiveTag.call(this);
                this.$router.replace({
                    path: '/album_3/admin'
                });
                this.SET_QUKUALBUM_DATA([]);
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },

        handleRefuse() {
            this.visible = true;
            this.reason.remark = '';
        },
        async refuse() {
            try {
                let url = '/album/auditless';
                let { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        id: this.$route.query.id,
                        remark: this.reason.remark
                    }),
                    headers: {
                        name: localStorage.getItem('ms_username')
                    }
                });
                this.visible = false;
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.$closeActiveTag.call(this);
                this.$router.replace({
                    path: '/album_3/admin'
                });
                this.SET_QUKUALBUM_DATA([]);
            } catch (err) {
                console.dir(err);
                this.visible = false;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        }
    }
};
</script>

<style lang="scss">
.el-message-box__wrapper[aria-label='歌词预览'] {
    .el-message-box {
        width: 666px !important;
    }
}

#singer_checked {
    .el-image {
        line-height: 200px;
        background: #f3f6f9;
        .image-slot {
            text-align: center;
            color: #606266;
        }
    }

    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 185px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .w {
        // width: 470px !important;
        width: 100% !important;
    }

    .wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        justify-content: center;
        justify-items: center;
        grid-auto-flow: row;
        align-items: flex-start;
        align-content: flex-start;
        .title {
            .el-form-item__label {
                color: #0099ff;
                font-size: 16px;
                font-weight: bold;
                text-decoration: underline;
                cursor: pointer;
            }
        }
        .wrapper-left {
            width: 100%;
            padding-right: 50px;
            .el-form-item {
                .el-form-item__label-wrap {
                    margin-left: 0px !important;
                    width: 160px;
                    text-align: right;
                }
                .el-form-item__content {
                    margin-left: 160px !important;
                }
            }
        }
        .wrapper-right {
            width: 100%;
            .el-form-item {
                .el-form-item__label-wrap {
                    margin-left: 0px !important;
                    width: 160px;
                    text-align: right;
                }
                .el-form-item__content {
                    margin-left: 160px !important;
                }
            }
        }
    }

    .table {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .el-table {
            display: inline-block;
            width: 100%;
            &:first-of-type {
                margin-right: 40px;
                margin-left: 30px;
            }
            &:nth-of-type(2) {
                margin-left: 40px;
            }
            .u1048_icon {
                width: 28px;
                height: 34px;
            }
            .play_icon,
            .pause_icon {
                width: 43px;
                height: 37px;
            }
            .u1049_icon {
                width: 22px;
                height: 9px;
            }
            .btn {
                position: relative;
                display: inline-block;
                text-align: center;
                color: #fff;
                text-decoration: none;
                width: 80px;
                height: 32px;
                line-height: 32px;
                background: #409eff;
                border-radius: 3px;
                font-size: 12px;
                vertical-align: middle;
                margin-left: 10px;
            }
            input[name='file'] {
                opacity: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
            }
        }
    }
    .el-row {
        // padding-left: 10%;
        text-align: right;
    }
}
</style>
